<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <view class="back-arrow"></view>
      </view>
      <text class="header-title">个人信息</text>
      <view class="right-btn" @click="toggleEditMode">
        <text class="edit-text">{{ isEditMode ? "保存" : "编辑" }}</text>
      </view>
    </view>

    <!-- 个人信息表单 -->
    <view class="info-section">
      <!-- 头像 -->
      <view class="avatar-container">
        <image
          class="avatar"
          :src="getAvatarUrl(userInfo.avatar)"
          mode="aspectFill"
        ></image>
        <view v-if="isEditMode" class="avatar-upload" @click="uploadAvatar">
          <view class="upload-icon">+</view>
        </view>
      </view>

      <!-- 信息项 -->
      <view class="info-item">
        <text class="info-label">用户名</text>
        <text v-if="!isEditMode" class="info-value">{{
          userInfo.username || "未设置"
        }}</text>
        <input
          v-else
          v-model="editUserInfo.username"
          class="info-input"
          placeholder="请输入用户名"
        />
      </view>

      <view class="info-item">
        <text class="info-label">邮箱</text>
        <text v-if="!isEditMode" class="info-value">{{
          userInfo.email || "未设置"
        }}</text>
        <input
          v-else
          v-model="editUserInfo.email"
          type="email"
          class="info-input"
          placeholder="请输入邮箱"
        />
      </view>

      <view class="info-item">
        <text class="info-label">电话</text>
        <text v-if="!isEditMode" class="info-value">{{
          userInfo.phone || "未设置"
        }}</text>
        <input
          v-else
          v-model="editUserInfo.phone"
          type="number"
          class="info-input"
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>
    </view>

    <!-- 操作提示 -->
    <view v-if="isEditMode" class="tips">
      <text class="tips-text">点击保存按钮提交修改</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isEditMode: false,
      options: null,
      userInfo: {
        id: "",
        username: "城市游客",
        avatar: "",
        email: "",
        phone: "",
      },
      editUserInfo: {},
    };
  },
  onLoad(options) {
    // 获取路由参数中的用户信息
    this.options = options;
    // 获取用户信息
    this.getUserInfo();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 获取用户信息
    getUserInfo() {
      // 首先检查是否有通过路由参数传递过来的用户信息
      if (this.options && this.options.userInfo) {
        try {
          // 解析并使用传递过来的用户信息
          const parsedUserInfo = JSON.parse(
            decodeURIComponent(this.options.userInfo)
          );
          console.log("从路由参数获取用户信息:", parsedUserInfo);
          // 确保id字段被正确保留
          this.userInfo = {
            ...parsedUserInfo,
            id: parsedUserInfo.id || "",
          };
        } catch (error) {
          console.error("解析用户信息失败:", error);
          // 如果解析失败，保持默认值
        }
      } else {
        // 模拟获取用户信息
        // 实际项目中应该从服务器或本地存储获取
        console.log("使用默认用户信息");
      }

      // 初始化编辑信息
      this.editUserInfo = JSON.parse(JSON.stringify(this.userInfo));
    },

    // 切换编辑模式
    toggleEditMode() {
      if (this.isEditMode) {
        // 保存修改前的表单验证
        if (!this.validateForm()) {
          return;
        }
        // 保存修改
        this.saveUserInfo();
      } else {
        // 进入编辑模式
        this.isEditMode = true;
        // 复制当前信息到编辑对象
        this.editUserInfo = JSON.parse(JSON.stringify(this.userInfo));
      }
    },

    // 表单验证
    validateForm() {
      // 验证用户名
      if (
        !this.editUserInfo.username ||
        this.editUserInfo.username.trim() === ""
      ) {
        uni.showToast({
          title: "用户名不能为空",
          icon: "none",
        });
        return false;
      }

      // 验证邮箱（如果填写了）
      if (
        this.editUserInfo.email &&
        !this.isValidEmail(this.editUserInfo.email)
      ) {
        uni.showToast({
          title: "请输入有效的邮箱地址",
          icon: "none",
        });
        return false;
      }

      // 验证手机号（如果填写了）
      if (
        this.editUserInfo.phone &&
        !this.isValidPhone(this.editUserInfo.phone)
      ) {
        uni.showToast({
          title: "请输入有效的手机号",
          icon: "none",
        });
        return false;
      }

      return true;
    },

    // 验证邮箱格式
    isValidEmail(email) {
      const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return reg.test(email);
    },

    // 验证手机号格式
    isValidPhone(phone) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(phone);
    },

    // 保存用户信息
    async saveUserInfo() {
      try {
        // 确保id是必须的参数
        if (!this.userInfo.id) {
          uni.showToast({
            title: "用户ID缺失，无法保存",
            icon: "none",
          });
          return;
        }

        // 显示加载提示
        uni.showLoading({
          title: "保存中...",
        });

        // 准备上传数据
        const uploadData = {
          id: this.userInfo.id,
        };

        // 添加可选参数
        if (this.editUserInfo.username) {
          uploadData.username = this.editUserInfo.username;
        }
        if (this.editUserInfo.email) {
          uploadData.email = this.editUserInfo.email;
        }
        if (this.editUserInfo.phone) {
          uploadData.phone = this.editUserInfo.phone;
        }

        // 如果有上传新头像，使用uni.uploadFile上传
        if (this.editUserInfo.avatarTempFile) {
          // 使用uni.uploadFile处理文件上传
          await new Promise((resolve, reject) => {
            uni.uploadFile({
              url: "http://127.0.0.1:8687/admin/user/update",
              filePath: this.editUserInfo.avatarTempFile,
              name: "avatarFile",
              formData: uploadData,
              success: (uploadRes) => {
                try {
                  const data = JSON.parse(uploadRes.data);
                  if (uploadRes.statusCode === 200 && data.code === 200) {
                    resolve();
                  } else {
                    reject(new Error(data.message || "上传失败"));
                  }
                } catch (e) {
                  reject(new Error("解析响应失败"));
                }
              },
              fail: (err) => {
                reject(err);
              },
            });
          });
        } else {
          // 如果没有头像文件，使用普通POST请求
          const response = await uni.request({
            url: "http://127.0.0.1:8687/admin/user/update",
            method: "POST",
            header: {
              "content-type": "application/x-www-form-urlencoded",
            },
            data: uploadData,
          });

          if (response.statusCode !== 200 || response.data.code !== 200) {
            throw new Error(response.data.message || "保存失败");
          }
        }

        // 隐藏加载提示
        uni.hideLoading();

        // 更新用户信息
        this.userInfo = JSON.parse(JSON.stringify(this.editUserInfo));

        // 退出编辑模式
        this.isEditMode = false;

        // 清除临时文件路径
        delete this.editUserInfo.avatarTempFile;

        // 显示保存成功提示
        uni.showToast({
          title: "保存成功",
          icon: "success",
        });

        // 通知mine页面更新数据，并标记是否更新了头像
        uni.$emit('userInfoUpdated', {
          ...this.userInfo,
          avatarUpdated: !!this.editUserInfo.avatarTempFile // 如果有临时头像文件，表示更新了头像
        });
      } catch (error) {
        uni.hideLoading();
        console.error("保存用户信息失败:", error);
        uni.showToast({
          title: error.message || "保存失败，请重试",
          icon: "none",
        });
      }
    },

    // 获取头像URL
    getAvatarUrl(avatar) {
      // 处理不同情况的头像显示
      if (avatar) {
        // 如果是完整的URL，则直接使用
        if (avatar.startsWith("http://") || avatar.startsWith("https://")) {
          return avatar;
        }
        // 否则拼接minio服务器路径
        return `http://192.168.126.1:9000/fznostalgia/user/${avatar}`;
      }
      // 如果没有头像，使用默认头像
      return "/static/logo.png";
    },

    // 上传头像
    uploadAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          // 直接使用临时文件路径显示预览图
          this.editUserInfo.avatar = tempFilePath;
          // 保存临时文件路径，用于后续上传
          this.editUserInfo.avatarTempFile = tempFilePath;
        },
        fail: (err) => {
          console.log("选择图片失败", err);
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面头部 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e0e0e0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-arrow {
  width: 0;
  height: 0;
  border-top: 12rpx solid transparent;
  border-bottom: 12rpx solid transparent;
  border-right: 16rpx solid #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.edit-text {
  font-size: 32rpx;
  color: #4facfe;
}

/* 信息区域 */
.info-section {
  margin-top: 120rpx;
  background-color: #fff;
  padding: 40rpx 30rpx;
}

/* 头像 */
.avatar-container {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto 40rpx;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
}

.avatar-upload {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60rpx;
  height: 60rpx;
  background-color: #4facfe;
  border-radius: 50%;
  border: 4rpx solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
}

/* 信息项 */
.info-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  width: 180rpx;
  font-size: 32rpx;
  color: #666;
}

.info-value {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.info-input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  padding: 0;
}

.info-textarea {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  padding: 0;
  min-height: 100rpx;
  line-height: 44rpx;
}

/* 性别选择 */
.gender-select {
  flex: 1;
  display: flex;
  gap: 20rpx;
}

.gender-option {
  padding: 10rpx 30rpx;
  border: 2rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #666;
}

.gender-option.selected {
  border-color: #4facfe;
  color: #4facfe;
  background-color: #f0f9ff;
}

/* 提示信息 */
.tips {
  margin-top: 30rpx;
  padding: 0 30rpx;
}

.tips-text {
  font-size: 28rpx;
  color: #999;
}

/* 响应式调整 */
@media screen and (min-width: 768px) {
  .container {
    max-width: 768rpx;
    margin: 0 auto;
  }
}
</style>
